<template>
	<view class='tab_page'>
		<view class="header">
			<view class="title">
				我的
			</view>
		</view>
		<view class="user_info">
			<image src="/static/image/avatar.png" mode=""></image>
			<view class="info">
				<view class="user">
					<view class="name">
						人员02
					</view>
					<view class="identity">
						施工管理人员
					</view>
				</view>
				<view class="account vice_text">
					账号：18266666666
				</view>
			</view>
		</view>
		<view class="vip">
			<view class="info">
				<view class="title">
					暂未开通付费功能，只提供30天试用期
				</view>
				<view class="tip">
					试用期于25天后到期，到期后部分功能将关闭
				</view>
			</view>
			<view class="open">
				立即开通
			</view>
		</view>

		<view class="information">
			<view class="item">
				<view class="label">项目名称</view>
				<view class="info" @click="handlePopup('项目')">
					<view class="value">{{userInfo.project||'请选择所在项目'}}</view>
					<image class="next" src="/static/image/next.png" mode="" />
				</view>
			</view>
			<view class="item">
				<view class="label">标段</view>
				<view class="info" @click="handlePopup('标段')">
					<view class="value">{{userInfo.section||'请选择所在标段'}}</view>
					<image class="next" src="/static/image/next.png" mode="" />
				</view>
			</view>
			<view class="item">
				<view class="label">工区</view>
				<view class="info" @click="handlePopup('工区')">
					<view class="value">{{userInfo.workArea||'请选择所在工区'}}</view>
					<image class="next" src="/static/image/next.png" mode="" />
				</view>
			</view>
			<view class="item">
				<view class="label">工区权限审核</view>
				<view class="info" @click="handleAduit">
					<view class="value">收到{{userInfo.auditPermission}}条申请</view>
					<image class="next" src="/static/image/next.png" mode="" />
				</view>
			</view>
			<view class="item">
				<view class="label">转让审核权限</view>
				<view class="info" @click="handleTransfer">
					<view class="value"></view>
					<image class="next" src="/static/image/next.png" mode="" />
				</view>
			</view>

			<view class="import">
				<image class="next" src="/static/image/import.png" mode="" />
				导入分部分项工程划分表
			</view>
		</view>

		<button class="loginOut" type="primary" @click="loginOut">退出登录</button>

		<tab-bar activeWay='mine'></tab-bar>

		<u-popup :show="showPopup" mode='center' @close="handleClose">
			<view class="my-popup">
				<view class="head" @click="handleClose">
					<image src="/static/image/back.png" mode="" />
					<view class="title_text">请输入</view>
					<view class="blank"></view>
				</view>
				<view class="form">
					<form @submit="formSubmit" ref="form">
						<view class="title_text">{{popupType}}名称查找<text>*</text></view>
						<view class="my-input">
							<input v-model="keyValue" @input="keySearch" class="uni-input" name="keyValue"
								:placeholder="currentEdit" />
						</view>
						<!-- 					<view class="new" v-if="!searchList.length">
							该项目为新建项目 您确定要使用该项目名称吗
						</view> -->
						<view class="search" v-if="searchList.length">
							<view class="search_list">
								<view class="search_item" v-for="(item,index) in searchList" :key="index"
									@click="chooseItem(item)">
									{{item}}
								</view>
							</view>
						</view>
						<button form-type="submit" class="confirm" type="primary">保存</button>
					</form>
				</view>
			</view>
		</u-popup>

		<!-- 退出登录确认弹窗 -->
		<u-popup class=" loginOutPopup" :show="showLoginout" mode='center' @close="closeLoginout">
			<view class="tip">
				<!-- <image src="/static/img/tip.png" mode="" /> -->
				<view>您确定要退出登录吗？</view>
			</view>
			<!-- <view class="title">您确定要退出登录吗？</view> -->
			<view class="btn">
				<button class="confirm" type="primary" @click="closeLoginout">取消</button>
				<button type="primary" @click="confirmLoginout">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import TabBar from '@/components/TabBar.vue'

	export default {
		components: {
			TabBar
		},
		data() {
			return {
				showPopup: false,
				popupType: '项目',
				keyValue: '',
				searchList: [],
				userInfo: {},
				showLoginout: false,
			}
		},
		onLoad() {
			console.log('onload');
			this.initInfo()
		},
		methods: {
			initInfo() {
				request(`/person/employee/getInfo`).then((res) => {
					console.log(res.data, 'update');
					if (res.data.code == 200) {
						this.userInfo = res.data.data
					}
				})
			},
			loginOut() {
				this.showLoginout = true
			},
			closeLoginout() {
				this.showLoginout = false
			},
			handleClose() {
				this.showPopup = false
				this.keyValue = ''
				this.searchList = []
			},
			handlePopup(type) {
				this.showPopup = true,
					this.popupType = type
			},
			// 防抖函数
			debounce(func, delay) {
				let timer = null;
				return function() {
					if (timer) {
						clearTimeout(timer);
					}
					timer = setTimeout(() => {
						func.apply(this, arguments);
						timer = null;
					}, delay);
				};
			},
			formSubmit(e) {
				const formData = e.detail.value
				console.log('form发生了submit事件，携带数据为：', e.detail.value)
				if (!this.keyValue) {
					uni.showToast({
						icon: 'none',
						title: '请填写有效数据',
						duration: 2000
					});
					return
				}
				let data = {}
				if (this.popupType == '项目') {
					data = {
						project: formData.keyValue
					}
				} else if (this.popupType == '标段') {
					data = {
						section: formData.keyValue
					}
				} else if (this.popupType == '工区') {
					data = {
						workArea: formData.keyValue
					}
				}
				request(`/person/employee/update`, {
					method: 'POST',
					data
				}).then((res) => {
					console.log(res.data, 'update');
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 2000
						});
						this.handleClose()
						this.initInfo()
					}
				})
			},
			chooseItem(value) {
				this.keyValue = value
				this.searchList = []
			},
			keySearch(key) {
				let data = {}
				let param = key.detail.value
				if (!!param) {
					if (this.popupType == '项目') {
						data = {
							project: param
						}
					} else if (this.popupType == '标段') {
						data = {
							section: param
						}
					} else if (this.popupType == '工区') {
						data = {
							workArea: param
						}
					}
					request(`/person/employee/queryProject`, {
						method: 'POST',
						data
					}).then((res) => {
						console.log(res.data, 'updateDirectory');
						if (res.data.code == 200) {
							this.searchList = res.data.data
						}
					})
					// this.debounce(()=>{
					// },1000)
				} else {
					this.searchList = []
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/style/tabPage.scss";

	.user_info {
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 50rpx;

		image {
			width: 92rpx;
			height: 92rpx;
			margin-right: 30rpx;
		}

		.user {
			display: flex;
			align-items: center;

			.name {
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				margin-right: 30rpx;
				color: rgba(54, 56, 63, 1);
			}

			.identity {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
				border-radius: 26rpx;
				padding: 5rpx 15rpx;
				background-color: rgba(82, 177, 255, 1);
			}
		}

		.account {
			margin-top: 10rpx;
		}
	}

	.vip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		margin-top: 30rpx;
		background-color: rgba(229, 229, 229, 1);

		.title {
			font-size: 24rpx;
			font-weight: 500;
			line-height: 34rpx;
			color: rgba(51, 51, 51, 1);
		}

		.tip {
			font-size: 16rpx;
			margin-top: 10rpx;
			color: rgba(102, 102, 102, 1);
		}

		.open {
			font-size: 24rpx;
			font-weight: 500;
			border-radius: 46rpx;
			padding: 10rpx 30rpx;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(82, 177, 255, 1);
		}
	}

	.information {
		position: relative;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 50rpx;
		height: 40vh;
		background-color: rgba(255, 255, 255, 1);

		.item {
			display: flex;
			flex: 1;
			margin-bottom: 40rpx;
			align-items: center;
			justify-content: space-between;

			.label {
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
				line-height: 40rpx;
			}

			.info {
				font-size: 28rpx;
				display: flex;
				color: rgba(166, 166, 166, 1);
				line-height: 40rpx;
				align-items: center;

				.value {
					font-size: 28rpx;
					color: rgba(166, 166, 166, 1);
				}

				.next {
					width: 24rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}
		}

		.import {
			position: absolute;
			bottom: 50rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(82, 177, 255, 1);

			image {
				margin-right: 10rpx;
			}
		}
	}

	.u-popup /deep/ .u-popup__content {
		width: 600rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 40rpx;

		.u-safe-bottom {
			padding: 0 !important;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.blank {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.form {
			width: 100%;
			padding: 20rpx;

			// background-color: #b0edff;
			.title_text {
				margin: 20rpx 0;

				text {
					color: rgba(255, 87, 51, 1);
				}
			}

			.confirm {
				width: 98%;
				margin-top: 50rpx;
			}
		}

		.new {
			font-size: 20rpx;
			margin-top: 10rpx;
			color: rgba(82, 177, 255, 1);
		}

		.search {
			padding: 20rpx;
			border-radius: 10rpx;
			border: 1px solid #ced8ce;
			border-top: none;

			// background-color: #a5ff69;
			.search_list {
				max-height: 300rpx;
				overflow-y: auto;

				.search_item {
					font-size: 28rpx;
					line-height: 50rpx;
					color: rgba(166, 166, 166, 1);
				}
			}
		}
		.tip {
			display: flex;
			align-items: center;
			justify-content: center;
			// margin: 10rpx 0;
			line-height: 80rpx;
			color: rgba(102, 102, 102, 1);
			
			// background-color: rgb(168, 72, 72);
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 20rpx;
			}
		}
			
		.btn {
			// position: absolute;
			// bottom: 0rpx;
			width: 85%;
			display: flex;
			justify-content: space-between;
			
			button {
				width: 45%;
				line-height: 80rpx !important;
				position: relative;
			}
			
			.confirm {
				color: rgba(156, 156, 255, 1);
				background-color: rgba(235, 235, 255, 1) !important;
			}
		}
	}
	
</style>